<template>
  <ui-page class="container">
    <!-- table -->
    <ui-table v-bind="table.config" ref="table" class="content_container" :params="{tenantId: userInfo.tenantId}"
              @select-change="onSelectTableEntity">
      <!--   查询   -->
      <template v-slot:search-bar>
        <ui-table-select v-model="table.model.select" :reset="true">
          <ui-table-select-item name="userCode" label="用户编码" placeholder="请输入用户编码" show-label type="text"
                                :show-word-limit="false"/>
          <ui-table-select-item name="userName" label="用户姓名" placeholder="请输入用户姓名" show-label type="text"
                                :show-word-limit="false"/>
          <ui-table-select-item name="requestMethod" label="请求方式" placeholder="请输入请求方式" show-label type="select"
                                :data="requestMethod" :show-word-limit="false"/>
          <ui-table-select-item name="responseStatus" label="响应状态码" placeholder="请输入响应状态码" show-label type="number"
                                start-null/>
          <ui-table-select-item name="logType" label="日志类型" placeholder="请输入日志类型" show-label type="select"
                                :data="logType" :show-word-limit="false"/>
          <ui-table-select-item name="createdDate" label="采集时间" type="datetimerange"/>
        </ui-table-select>
      </template>
      <ui-table-column label="序号" type="index" width="60px"/>
      <ui-table-column prop="userCode" label="用户编码"/>
      <ui-table-column prop="userName" label="用户姓名"/>
      <ui-table-column prop="requestIp" label="请求IP"/>
      <ui-table-column prop="requestUrl" label="请求URL"/>
      <ui-table-column prop="requestAction" label="请求功能"/>
      <ui-table-column prop="requestMethod" label="请求方式"/>
      <ui-table-column prop="responseTime" label="响应时间"/>
      <ui-table-column prop="responseStatus" label="响应状态码"/>
      <ui-table-column prop="clientDevice" label="终端设备"/>
      <ui-table-column prop="logTypeText" label="日志类型"/>
      <ui-table-column prop="createTime" label="操作时间"/>
      <ui-table-column type="action" :buttons="table.buttons" :resizable="false"/>
      <!--   分页   -->
      <template v-slot:footer-bar>
        <ui-table-pagination/>
      </template>
    </ui-table>
  </ui-page>
</template>
<script>
import {mapState} from 'vuex';

const SysLog = {
  API: {
    create: '/Sys/SysLog/create',
    update: '/Sys/SysLog/update',
    delete: '/Sys/SysLog/delete',
    select: '/Sys/SysLog/select',
    export: '/Sys/SysLog/export',
    createList: '/Sys/SysLog/createList',
    updateList: '/Sys/SysLog/updateList',
    deleteList: '/Sys/SysLog/deleteList',
    selectList: '/Sys/SysLog/selectList',
    selectPage: '/Sys/SysLog/selectPage',
  },
  data() {
    return {
      api: SysLog.API,
      table: {
        config: {
          url: SysLog.API.selectPage,
        },
        model: {
          select: {},
        },
      },
      form: {
        isCreate: true,
        title: '新增',
        url: SysLog.API.create,
        visible: false,
        rules: {},
      },
      requestMethod: [{value: 'GET', label: 'GET'}, {value: 'POST', label: 'POST'}],
      logType: [{value: 'LOGIN', label: '登录日志'}, {value: 'OPERATION', label: '操作日志'}],
      eq: ''
    };
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    onSelectTableEntity(selects) {
      if (selects.length <= 0) {
        return;
      }
      this.handleEntityUpdateRow(selects[selects.length - 1]);
    },
    reloadTable() {
      this.$refs.table && this.$refs.table.reload();
    },
    afterFormSubmit({success}) {
      if (!success) {
        return;
      }
      this.form.visible = false;
      this.reloadTable();
    }
  },
};
export default SysLog;
</script>
<style lang="less" scoped>
</style>
